<template>
  <div class="my_page_container">
    <div class="bg-white">
      <AmyQueryItem
        search-label="模板名称"
        @make-search-condition="queryTable"
      />
    </div>
    <div class="bg-white">
      <AmyCard
        :items="myPageList"
        class="q-mt-sm"
        itemClass="col-xl-2 col-sm-3 col-xs-8"
      >
        <template v-slot:item="props">
          <q-intersection once transition="scale">
            <AmyShadow>
              <q-card square bordered flat class="q-pb-sm">
                <div class="q-ma-md"><strong>{{ props.item.cname }}</strong></div>
                <q-img :src="props.item.imgUrl" :ratio="16 / 10" />
                <div class="q-mt-sm">
                  <div class="row q-ma-sm justify-end q-gutter-sm">
                    <q-btn
                      unelevated
                      dense
                      size="sm"
                      color="primary"
                      label="修改"
                      @click="updateModule(props.item.id)"
                    />
                    <q-btn
                      unelevated
                      dense
                      size="sm"
                      color="teal"
                      label="删除"
                      @click="deleteModule(props.item.id)"
                    />
                    <q-btn
                      unelevated
                      dense
                      size="sm"
                      color="orange"
                      label="预览"
                      @click="previewModule(props.item.id)"
                    />
                  </div>
                </div>
              </q-card>
            </AmyShadow>
          </q-intersection>
        </template>
        <template v-slot:pagination>
          <AmyPagination :page-msg="pagination" @update="refreshTableAry"/>
        </template>
      </AmyCard>
    </div>
  </div>
</template>

<script lang="ts">
import { defineAsyncComponent, defineComponent, onMounted, onUnmounted, reactive, ref } from 'vue';
import api from 'axios'
import { ModPageItem } from './ModPageModel';
import { ECommonConst } from 'src/util/BaseConst';
import { modBaseUrlAPI } from 'src/util/ModBaseConst';
import { useMessageNotify } from 'src/hook/common/useMessageNotify';
import { useRouter } from 'vue-router';
import { useNavTabStore } from 'stores/navTabStore';
import { EPageType } from 'stores/editorModels';
import { CQueryParam } from 'src/components/basic/basicModel';

import BaseItem from '../../BaseItem.vue';
const AmyCard = defineAsyncComponent(() => import('components/grid/AmyCard.vue'));
const AmyShadow = defineAsyncComponent(() => import('components/grid/AmyShadow.vue'));

export default defineComponent({
  name: 'PageIndex',
  extends: BaseItem,
  components: {
    AmyCard,
    AmyShadow
  },

  setup (props, context) {
    //*********************************************************************************************
    //      路由
    //*********************************************************************************************
    let router = useRouter();
    let navStore = useNavTabStore();

    //*********************************************************************************************
    //      消息通知
    //*********************************************************************************************
    //消息通知
    const {
      showSuccessMessage,
      showMessage
    } = useMessageNotify();

    //*********************************************************************************************
    //      查询模块
    //*********************************************************************************************
    //查询输入参数
    let queryParam = reactive({
      name: '',
      startDate: '',
      endDate: ''
    });

    //有条件查询
    const queryTable = (s: CQueryParam) => {
      queryParam.name = s.name;
      queryParam.startDate = s.startDate;
      queryParam.endDate = s.endDate;

      //有条件查询
      getPageList();
    }

    //*********************************************************************************************
    //      读取数据库
    //*********************************************************************************************
    //模板列表
    let myPageList = ref<ModPageItem[]>([]);

    //分页变量
    let pagination = ref({
      pageNum: 1,
      pageSize: ECommonConst.CARD_PAGE_SIZE,
      total: 20
    });


    //读取模板列表
    const getPageList = () => {
      api.post(modBaseUrlAPI.MOD_PAGE_API_PAGE, {
        cname: queryParam.name,
        startDate: queryParam.startDate,
        endDate: queryParam.endDate,
        pageNum: pagination.value.pageNum,
        pageSize: pagination.value.pageSize
      }).then((res) => {
        if (res.data.message === 'Success') {
          myPageList.value = res.data.data.list;
          pagination.value.total = res.data.data.total;
          //alert('success');
        } else {
          showMessage(res.data.message);
        }
      }).catch((error) => {
        showMessage(error.message);
      })
    }

    //更新分页组件
    const refreshTableAry = (pageNum: number) => {
      pagination.value.pageNum = pageNum;
      getPageList();
    }

    //修改当前模板
    const updateModule = (mid: number) => {
      //新窗口打开链接
      let pType = EPageType.MOD_PAGE;
      let projectName = '模板';
      let url = `http://127.0.0.1:7050/#/editor?projectId=0&&projectName=${projectName}&&pageType=${pType}&&pageId=${mid}`
      window.open(url, '_blank');
    }

    //删除当前模板
    const deleteModule = (mid: number) => {
      api.post(modBaseUrlAPI.MOD_PAGE_API_DELETE, {
        id: mid
      }).then((res) => {
        if (res.data.message === 'Success') {
          let index = myPageList.value.findIndex((item) => (item.id === mid));
          if (index !== -1) {
            myPageList.value.splice(index, 1);
          }
          showSuccessMessage('删除');
        } else {
          showMessage(res.data.message);
        }
      }).catch((error) => {
        showMessage(error.message);
      })
    }

    //预览当前模板
    const previewModule = (mid: number) => {
      let route = {
        name: '模板预览',
        path: '/mod/mod_preview'
      };

      //动态路由
      router.push({
        path: route.path,
        query: {
          pageType: EPageType.MOD_PAGE,
          pageId: mid
        }
      });

      //加载在tab组件上
      navStore.addRouteTabs(route);
    }

    //*********************************************************************************************
    //      启动模块
    //*********************************************************************************************
    //初始化
    const init = () => {
      //无条件检索
      getPageList();
    }

    onMounted(() => {
      init();
    });

    //销毁数据
    onUnmounted(() => {

    });

    return {
      queryTable,

      myPageList,
      pagination,
      refreshTableAry,
      updateModule,
      deleteModule,
      previewModule
    }
  }
})
</script>

<style lang="scss" scoped>
.my_input {
  width: 150px;
}
</style>
